

import { Component } from "react";
import type { ReactNode } from 'react'

/*
    在 React 中插槽类似于鸿蒙中的尾随闭包，可以将标签传递到子组件中使用
    传递的时候根标签只能有 1 个

    如果需要传递多个，那么可以使用属性传递
*/



interface iProps {
    children: ReactNode
}


class Header extends Component {
    // 读取游戏卡，children 是固定写法
    props = {
        children: <></>
    }

    render() {
        return <header>
            {/* 使用游戏卡 */}
            <h1>头部组件 --- {this.props.children}</h1>
        </header>
    }
}

function Content(props: iProps) {
    return <main>
        <h1>主体内容组件</h1>
        {props.children}
    </main>
}

export default class App extends Component {

    state = {
        title: '辣条'
    }

    render(): ReactNode {
        return <>
            <div>
                <h1>父组件 -- {this.state.title}</h1>
                <hr />
                <Header>
                    {/* 插槽中只能有一个根标签 */}
                    <div>
                        {/* del 理解为游戏卡 */}
                        <del>￥199.99</del>
                        <span style={{ color: '#f66' }}>￥188</span>
                    </div>
                </Header>
                <hr />
                <Content>
                    <h1>你好世界</h1>
                </Content>
            </div>
        </>
    }
}